<template>
	<view class="goshop-spend-container">
		<view class="goshop-spend-head">
			<view class="goshop-spend-head-box">
				<view class="goshop-spend-logo">
					<image style="width: 64rpx;height: 64rpx;" src="../../static/logo.png"></image>
					<view class="goshop-spend-logo-text">XXXX</view>
				</view>
				<view class="goshop-spend-hint">
					<image style="width: 84rpx;height: 84rpx;" src="../../static/imgs/pair.png"></image>
					<view class="goshop-spend-hint-text">恭喜你 !话费券资格锁定</view>
				</view>
			</view>
		</view>
		<view class="goshop-spend-recharge">
			<view class="goshop-spend-recharge-box">
				<image class="goshop-spend-line" src="../../static/imgs/line.png"></image>
				<view class="goshop-spend-recharge-box-title">充话费</view>
				<view class="goshop-spend-recharge-box-select">
					<view class="select-item">
						<view class="select-item-title">20元</view>
						<view class="select-item-price">售价：20元</view>
					</view>
					<view class="select-item-active">
						<view class="select-item-active-hit">话费充值券</view>
						<view class="select-item-active-title">100元</view>
						<view class="select-item-active-price">售价：29.9元</view>
					</view>
					<view class="select-item">
						<view class="select-item-title">50元</view>
						<view class="select-item-price">售价：50元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goshop-spend-mobile">
			<view class="goshop-spend-mobile-box">
				<image class="goshop-spend-line" src="../../static/imgs/line.png"></image>
				 <u--input
					placeholder="输入您的手机号"
					border="surround"
					v-model="form.mobile"
					@change="change"
					shape="circle"
				></u--input>
				<u-button class="goshop-spend-determine" type="error" text="确定" shape="circle"></u-button>
				<view class="goshop-spend-protocol">
					<u-checkbox-group
						v-model="form.check"
						placement="column"
						@change="checkboxChange"
					>
						<u-checkbox
							v-for="(item, index) in checkboxList"
							:key="index"
							:name="item.name"
						>
						</u-checkbox>
					</u-checkbox-group>
					提交即您已阅读并同意<text class="protocol">《用户隐私协议》</text>
				</view>
			</view>
		</view>
		<view class="goshop-spend-explain">
			<image style="width: 100%;height: 300rpx;" src="../../static/imgs/lbsm.png"></image>
		</view>
		<view class="goshop-spend-coupon">
			<view class="goshop-spend-coupon-box">
				<view class="goshop-spend-coupon-item">
					<view class="goshop-spend-coupon-item-content">
						<image style="height: 60rpx;width: 60rpx;" src="../../static/imgs/hb.png"></image>
						<view style="margin-top: 20rpx;">
							原价<text>100</text>元
						</view>
					</view>
					<view class="goshop-spend-coupon-item-content">
						<image style="height: 60rpx;width: 60rpx;" src="../../static/imgs/hb.png"></image>
						<view style="margin-top: 20rpx;">专享折扣<text>70.1</text>元</view>
					</view>
					<view class="goshop-spend-coupon-item-content">
						<view>支付29.9元</view>
						<view style="font-size: 2px;text-align: center;margin-top: 20rpx;">(随机立减，最高免单)</view>
					</view>
				</view>
				<view class="goshop-spend-coupon-desc">
					<view>详情：</view>
					<view>1.100元话费优惠券包：5张10元券+10张5元券</view>
					<view>2.下载“XXXX”查收100元券包</view>
					<view>3.话费券充值任意手机号可使用</view>
				</view>
			</view>
		</view>
		<view class="goshop-spend-step">
			<view class="goshop-spend-step-box">
				<view class="goshop-spend-step-box-list">
					<image style="width: 48px;height: 48px;" src="../../static/imgs/dowload.png"></image>
					<view style="width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;margin-left: 20rpx;">
						<image style="width: 66rpx;height: 28px;" src="../../static/imgs/right.png"></image>
					</view>
					<image style="width: 48px;height: 48px;" src="../../static/imgs/phone.png"></image>
					<view style="width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;margin-left: 20rpx;">
						<image style="width: 66rpx;height: 28px;" src="../../static/imgs/right.png"></image>
					</view>
					<image style="width: 48px;height: 48px;" src="../../static/imgs/coupon.png"></image>
				</view>
				<view class="goshop-spend-step-box-desc">
					<view>下载XXXAPP</view>
					<view style="margin: 0 20rpx;">手机号登录APP</view>
					<view><text class="price">29.9</text>领<text class="price">100</text>元话费券</view>
				</view>
			</view>
		</view>
		<view class="goshop-spend-footer">
			<rich-text :nodes="info.expandOne|formatRichText"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本案列数据
				checkboxList: [{
						name: '1',
						disabled: false
					},
				],
				form:{
					check:[],
					mobile:'',
				},
				info:{
					lbsm:'',
					expandOne:'客服电话:400-000-0000',
				}
			};
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText (html) { //控制小程序中图片大小
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}	
		},
		methods:{
			checkboxChange(n) {
				console.log('change', n);
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f2f2f2;
}
.goshop-spend-line{
	width: 100%;
	height: 10rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.protocol{
  color: #FF8400;
}
.price{
  color: #FE7739;
}
.select-item{
	width: 100px;
	height: 117px;
	background: #FFFFFF;
	border: 2rpx solid #C3C3C3;
	box-shadow: 0px 0px 5px 0px #C3C3C3;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.select-item-title{
		font-size: 50rpx;
		color: #4D4D4D;
	}
	.select-item-price{
		font-size: 20rpx;
		color: #B1B1B1;
		text-align: center;
	}
}
.select-item-active{
	width: 140px;
	height: 150px;
	background: url(../../static/imgs/good_bd.png) no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	.select-item-active-hit{
		position: absolute;
		top: 0;
		font-size: 25rpx;
		padding: 15rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.select-item-active-title{
		font-size: 60rpx;
		color: #4D4D4D;
		font-weight: bold;
	}
	.select-item-active-price{
		font-size: 20rpx;
		color: #B1B1B1;
		text-align: center;
		color: red;
	}
}
.goshop-spend-container{
	.goshop-spend-head{
		width: 100%;
		background: #66CF7E;
		padding: 10rpx 20rpx;
		.goshop-spend-head-box{
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			.goshop-spend-logo{
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;
				.goshop-spend-logo-text{
					margin-left: 10rpx;
					color: #FFFFFF;
					font-weight: bold;
					font-style:italic;
				}
			}
			.goshop-spend-hint{
				display: flex;
				align-items: center;
				.goshop-spend-hint-text{
					margin-left: 20rpx;
					color: #FFFFFF;
					font-size: 50rpx;
				}
			}
		}
	}
	.goshop-spend-recharge{
		padding: 10rpx 20rpx;
		.goshop-spend-recharge-box{
			background: #FFFFFF;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			.goshop-spend-recharge-box-title{
				font-weight: bold;
			}
			.goshop-spend-recharge-box-select{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				align-items: center;
			}
		}
	}
	.goshop-spend-mobile{
		padding:10rpx 20rpx;
		.goshop-spend-mobile-box{
			background: #FFFFFF;
			padding: 60rpx 80rpx;
			position: relative;
			.goshop-spend-determine{
				margin-top: 20rpx;
			}
			.goshop-spend-protocol{
				font-size: 25rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.goshop-spend-explain{
		padding:10rpx 20rpx;
		.goshop-spend-explain-box{
			background-size: 100% 100%;
			background-position: 50% 50%;
			background-repeat: no-repeat;
		}
	}
	.goshop-spend-coupon{
		padding:10rpx 20rpx;
		.goshop-spend-coupon-box{
			//background: #FFFFFF;
			padding: 20rpx;
			background: linear-gradient(0deg, #FFFEFD 72%, #FFEDED 85%);
			.goshop-spend-coupon-item{
				height: 200rpx;
				margin: 20rpx auto 0 auto;
				background: url(../../static/imgs/coupon_bg.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goshop-spend-coupon-item-content{
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;
					width: 200rpx;
					color: #FE7739;
				}
			}
			.goshop-spend-coupon-desc{
				padding:20rpx 0;
				color: #A2A2A2;
			}
		}
	}
	.goshop-spend-step{
		padding:10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.goshop-spend-step-box{
			background: #FFFFFF;
			height: 300rpx;
			background: url(https://y-qiwan.obs.cn-north-4.myhuaweicloud.com:443/qwhz-h5/page/h5_hf/h5_hf_pay/aw_bg_1.png) no-repeat;
			background-size: 100% 100%;
			padding: 10rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.goshop-spend-step-box-list{
				justify-content: space-between;
				display: flex;
				align-items: center;
			}
			.goshop-spend-step-box-desc{
				justify-content: space-between;
				display: flex;
				align-items: center;
				font-size: 25rpx;
				margin-top: 20rpx;
			}
		}
	}
	.goshop-spend-footer{
		padding:10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.goshop-spend-footer-box{
			background: #FFFFFF;
		}
	}
}
</style>
